/*
 * @Author: funlee
 * @Email: i@funlee.cn
 * @Date: 2019-06-21 14:19:39
 * @Description: 首页
 */
import React from "react";
import "./style.scss";
import { Menu, Layout } from "antd";
import { NavLink } from "react-router-dom";
import { AsyncPage } from "@/utils/util";
import RouteMenu from "@/components/routeMenu";

const ConsoleWarning = AsyncPage(() => import("./consoleWarning"));
const RelationRisks = AsyncPage(() => import("./relationRisks"));
const MyInstructions = AsyncPage(() => import("./myInstructions"));
const MyAddition = AsyncPage(() => import("./myAddition"));
const WorkNote = AsyncPage(() => import("./workNote"));
const EnterpriseInformationRetrieval = AsyncPage(() => import("./enterpriseInformationRetrieval"));
const AppInformationRetrieval = AsyncPage(() => import("./appInformationRetrieval"));
const GoBustLists = AsyncPage(() => import("./goBustLists"));
const ForeignEnterprisesDistribution = AsyncPage(() => import("./foreignEnterprisesDistribution"));
const IpLocation = AsyncPage(() => import("./ipLocation"));
const PhoneLocation = AsyncPage(() => import("./phoneLocation"));

const { SubMenu } = Menu;
const { Sider } = Layout;

function Home() {
    const sideLists = [
        {
            name: "控制台",
            id: "console",
            children: [
                { name: "管控预警", id: "gkyj", to: "/main/home/consoleWarning" },
                { name: "关联风险", id: "glfx", to: "/main/home/relationRisks" },
                { name: "我的指令", id: "wdzl", to: "/main/home/myInstructions" },
                { name: "我的添加", id: "wdtj", to: "/main/home/myAddition" },
                { name: "工作备注", id: "gzbz", to: "/main/home/workNote" }
            ]
        },
        {
            name: "应用工具",
            id: "application",
            children: [
                { name: "企业信息检索", id: "qyxxjs", to: "/main/home/enterpriseInformationRetrieval" },
                { name: "APP评论信息检索", id: "appplxxjs", to: "/main/home/appInformationRetrieval" },
                { name: "已暴雷名单", id: "yblmd", to: "/main/home/goBustLists" },
                { name: "外资企业分布", id: "wzqyfb", to: "/main/home/foreignEnterprisesDistribution" }
                // { name: "IP地址归属", id: "ipdzgs", to: "/main/home/ipLocation" },
                // { name: "手机归属地", id: "sjgsd", to: "/main/home/phoneLocation" }
            ]
        }
    ];
    const menuLists = [
        {
            path: "/main/home/consoleWarning",
            component: ConsoleWarning
        },
        {
            path: "/main/home/relationRisks",
            component: RelationRisks
        },
        {
            path: "/main/home/myInstructions",
            component: MyInstructions
        },
        {
            path: "/main/home/myAddition",
            component: MyAddition
        },
        {
            path: "/main/home/workNote",
            component: WorkNote
        },
        {
            path: "/main/home/enterpriseInformationRetrieval",
            component: EnterpriseInformationRetrieval
        },
        {
            path: "/main/home/appInformationRetrieval",
            component: AppInformationRetrieval
        },
        {
            path: "/main/home/goBustLists",
            component: GoBustLists
        },
        {
            path: "/main/home/foreignEnterprisesDistribution",
            component: ForeignEnterprisesDistribution
        },
        {
            path: "/main/home/ipLocation",
            component: IpLocation
        },
        {
            path: "/main/home/phoneLocation",
            component: PhoneLocation
        }
    ];
    return (
        <Layout>
            <Sider className="home-side">
                <Menu
                    style={{ borderRight: "none", marginTop: -4 }}
                    defaultOpenKeys={[sideLists[0].id, sideLists[1].id]}
                    mode="inline"
                >
                    {renderMenu(sideLists)}
                </Menu>
            </Sider>
            <Layout style={{ background: "#212734" }}>
                <div className="side-right">
                    <RouteMenu data={menuLists} />
                </div>
            </Layout>
        </Layout>
    );
}

function renderMenu(sideLists) {
    const dom = [];
    sideLists.forEach(menu => {
        const sonMenu = [];
        if (menu.hasOwnProperty("children")) {
            menu.children.forEach(item => {
                sonMenu.push(
                    <Menu.Item key={`${item.id}`} className="son-item">
                        <NavLink to={item.to}>
                            <i className={`icon ${item.id}`} />
                            {item.name}
                        </NavLink>
                    </Menu.Item>
                );
            });
        }

        dom.push(
            <SubMenu
                key={`${menu.id}`}
                title={
                    <div className="father-item">
                        <i className={`icon ${menu.id}`} />
                        <span>{menu.name}</span>
                    </div>
                }
            >
                {sonMenu}
            </SubMenu>
        );
    });

    return dom;
}

export default Home;
